/** 画布函数
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3";
import { useMessage } from 'naive-ui';
import { saveAs } from 'file-saver';
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onSetElementCont,
  onGetElementCont,
  onGetUUID,
  onActionRightNavigation, // 激活右框导航
  onActionDownNavigation, // 激活下框导航
  saveCanvasToProject,
  saveProjectToCanvas,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useStaticStore } from "@/store/staticStore"; // 静态
import { useWorkStore } from "@/store/workStore"; // 工作数据
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const projectStore = useProjectStore(); // 工程
const staticStore = useStaticStore(); // 静态
const workStore = useWorkStore(); // 设备数据
const message = useMessage()// 消息
/* ================================================================================================ */
//                                ★ 画布 函数
/* ================================================================================================ */
//
/** 绘制-标尺 */
export const onDrawRuler = () => {
 // console.log("✍ 绘制函数-标尺")
  /** ★ 清理标尺盒子  */
  d3.select("#RuleTop").remove();
  d3.select("#RuleLeft").remove();

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 标尺上边盒子尺寸
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let TopBoxSize = {
    width: 0,
    height: 0,
  };
  try {
    let BoxSize = document.getElementById("RuleTopBox").getBoundingClientRect();
    TopBoxSize.width = BoxSize.width;
    TopBoxSize.height = BoxSize.height;
  } catch (error) { }
 // console.log("标尺上边盒子尺寸")
 // console.log(TopBoxSize)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 标尺左边盒子尺寸
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let LefBoxSize = {
    width: 0,
    height: 0,
  };
  try {
    let BoxSize = document.getElementById("RuleLeftBox").getBoundingClientRect();
    LefBoxSize.width = BoxSize.width;
    LefBoxSize.height = BoxSize.height;
  } catch (error) { }
 // console.log("标尺左边盒子尺寸")
 // console.log(LefBoxSize)

  /** ★ 建立顶边-标尺盒子  */
  d3.select("#RuleTopBox")
    .append("svg")
    .attr("id", "RuleTop")
    .style("width", "100%")
    .style("height", "100%");
  /** ★ 建立左边-标尺盒子  */
  d3.select("#RuleLeftBox")
    .append("svg")
    .attr("id", "RuleLeft")
    .style("width", "100%")
    .style("height", "100%");

  /** 获取-画布缩放 */
  let canvasScale = Number(canvasStore.canvasAttr.canvasScale);
  /** 画布宽度 */
  let canvasWidth = Number(canvasStore.canvasAttr.canvasWidth);
  /** 画布高度 */
  let canvasHeight = Number(canvasStore.canvasAttr.canvasHeight);

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 X坐标_比例尺
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let scrollX = canvasStore.scrollX * (TopBoxSize.width / canvasWidth);
 // console.log(canvasStore.scrollX);
  let RuleScaleX = d3
    .scaleLinear()
    .domain([
      scrollX / canvasScale,
      TopBoxSize.width / canvasScale + scrollX / canvasScale,
    ])
    .range([0, TopBoxSize.width]);

  let xAxis = d3.axisTop(RuleScaleX);

  /** 绘制-X轴坐标 */
  d3.select("#RuleTop")
    .append("g")
    .attr("Name", "X轴坐标")
    .attr("opacity", 1)
    .attr("transform", "translate(" + 0 + "," + TopBoxSize.height + ")")
    .call(xAxis);

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 Y坐标_比例尺
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let scrollY = canvasStore.scrollY;
  let RuleScaleY = d3
    .scaleLinear()
    .domain([
      scrollY / canvasScale,
      LefBoxSize.height / canvasScale + scrollY / canvasScale,
    ])
    .range([0, LefBoxSize.height]);

  let yAxis = d3.axisLeft(RuleScaleY);

  /** 绘制-Y轴坐标*/
  d3.select("#RuleLeft")
    .append("g")
    .attr("Name", "Y轴坐标")
    .attr("opacity", 1)
    .attr("transform", "translate(" + LefBoxSize.width + "," + 0 + ")")
    .call(yAxis);
};

/** 设置当前页面 */
export const onSetCurrentPage = (Key: string) => {
 // console.log("设置当前页面")
 // console.log(Key)

  canvasStore.tips = "设置当前页面"; // 提示
  projectStore.pageId = Key;

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 清理其他工作
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  menuStore.setMenuChild('svgPel', 0);       // 设置子菜单状态-SVG图元
  menuStore.setMenuChild('divPel', 0);       // 设置子菜单状态-DIV图元
  menuStore.setMenuChild('componertPel', 0); // 设置子菜单状态-组件图元
  menuStore.setMenuChild('eidt', 0);         // 设置子菜单状态-编辑
  menuStore.setMenuChild('wrapLayout', 0);   // 设置子菜单状态-包及图层编辑
  menuStore.setMenuChild('editLine', 0);     // 设置子菜单状态-线编辑
  canvasStore.workState = 0; //清理-工作状态
  canvasStore.drawPelType = ""; //清理-绘制类型
  canvasStore.recordPoint = []; // 清理●记录点
  canvasStore.selectKeys = []; // 清理选择键
  canvasStore.selectToggle = !canvasStore.selectToggle; // 触发-选择切换


  saveCanvasToProject();// 转储-从_画布存储_到_工程存储

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历页面，设置当前页面索引
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝*/
  let CopyPages = JSON.parse(JSON.stringify(projectStore.pages));
  /** 遍历 */
  for (let Index = 0; Index < CopyPages.length; Index++) {
    let PageItem = CopyPages[Index];
    /** 判断-选中的 */
    if (PageItem.key === Key) {
      projectStore.pageIndex = Index;
    }
  }
  saveProjectToCanvas();//转储-从_工程存储_到_画布存储
  onActionRightNavigation("RightProject")  //激活右框导航-工程
};

/** 创建新页面 */
export const onCreateNewPage = () => {
 // console.log("创建新页面")

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 清理其他工作
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  menuStore.setMenuChild('svgPel', 0);       // 设置子菜单状态-SVG图元
  menuStore.setMenuChild('divPel', 0);       // 设置子菜单状态-DIV图元
  menuStore.setMenuChild('componertPel', 0); // 设置子菜单状态-组件图元
  menuStore.setMenuChild('eidt', 0);         // 设置子菜单状态-编辑
  menuStore.setMenuChild('wrapLayout', 0);   // 设置子菜单状态-包及图层编辑
  menuStore.setMenuChild('editLine', 0);     // 设置子菜单状态-线编辑
  canvasStore.tips = "创建新页面"; // 提示
  canvasStore.workState = 0; //清理-工作状态
  canvasStore.drawPelType = ""; //清理-绘制类型
  canvasStore.recordPoint = []; // 清理●记录点
  canvasStore.selectKeys = []; // 清理选择键
  canvasStore.selectToggle = !canvasStore.selectToggle; // 触发-选择切换
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立新页面参数 添加 到 页面
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 计数 */
  let PageCont = onSetElementCont("pageCont", Number(onGetElementCont("pageCont")) + 1);
  let pageName = "页面" + PageCont;
  let NewPageKey = "page" + onGetUUID();
  let NewPage = {
    label: pageName,
    key: NewPageKey,
    /** 画布属性 */
    canvasAttr: {
      // 🦢 页面
      /** 页面名称 */
      pageName: pageName,
      /** 页面键 */
      pageKey: NewPageKey,
      /** 页面尺寸 */
      pageSize: "svg_icon",
      /** 页面方向 */
      pageOrientation: "PageHorizontal",
      /** 页面精度 */
      pageAccuracy: "0级",
      /** 页面单位 */
      pageUnit: "px",

      // 🦢 画布
      /** 画布缩放 */
      canvasScale: 1,
      /** 画布背景色 */
      canvasBackColor: "rgba(0,0,0,1)",
      /** 画布宽度 */
      canvasWidth: 1024,
      /** 画布高度 */
      canvasHeight: 1024,
      // 🦢 格栅
      /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
      gridModel: 3,
      /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
      gridStyle: 2,
      /** 格栅间距 */
      gridSpace: 40,
      /** 宽等分数 */
      gridBisectionWidthCont: 10,
      /** 宽等分数 */
      gridBisectionHeightCont: 10,
      /** 格栅点颜色 */
      gridDotColor: "rgba(255,255,255,1)",
      /** 小格颜色 */
      gridColorMini: "rgb(50,50,50)",
      /** 大格颜色 */
      gridColorMax: "rgb(100,100,100)",
      /** 格栅宽度 */
      gridWidth: 10,
      /** 格栅高度 */
      gridHeight: 10,

      // 🦢 光标
      /** 显示光标 */
      isShowCursor: true,
      /** 光标颜色 */
      cursorColor: "rgb(0,255,0)",
      /** 光标盒子尺寸 */
      cursorBoxSize: 30,
      /** 光标长度 */
      cursorLang: 1600,
      /** 光标线宽度 */
      cursorLineWidth: 1,

      // 🦢 捕捉
      /** 捕捉 */
      isCatch: true,
      /** 捕捉距离 */
      catchRange: 1,
      /** 捕捉到 上左 */
      catchUpLeft: false,
      /** 捕捉到 上 */
      catchUp: false,
      /** 捕捉到 上右 */
      catchUpRight: false,
      /** 捕捉到 左 */
      catchLeft: false,
      /** 捕捉到 中 */
      catchMidle: false,
      /** 捕捉到 右 */
      catchRight: false,
      /** 捕捉到 下右 */
      catchDownRight: false,
      /** 捕捉到 下 */
      catchDown: false,
      /** 捕捉到 下左 */
      catchDownLeft: false,
    },
    /* 图元集 */
    pels: [],
    /** 图元数据 */
    pelData: [],
  };
  /** ★ ★ 添加 到 页面 */
  projectStore.pages.push(NewPage);

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 设置当前页面
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  onSetCurrentPage(NewPageKey);
  projectStore.pageId = NewPageKey;
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 切换布局
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  onActionRightNavigation("RightProject"); // 激活右框导航-工程
  setTimeout(() => {
    onActionDownNavigation("DownPage"); // 激活下框导航-页面
  }, 100);
};

/** 删除页面 */
export const onDeletePage = (Key: string) => {
 // console.log("删除页面")
 // console.log(Key)
  if (Key === "page1") {
    message.error("默认页面不能删除");
    return;
  }
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 清理其他工作
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  menuStore.setMenuChild('svgPel', 0);       // 设置子菜单状态-SVG图元
  menuStore.setMenuChild('divPel', 0);       // 设置子菜单状态-DIV图元
  menuStore.setMenuChild('componertPel', 0); // 设置子菜单状态-组件图元
  menuStore.setMenuChild('eidt', 0);         // 设置子菜单状态-编辑
  menuStore.setMenuChild('wrapLayout', 0);   // 设置子菜单状态-包及图层编辑
  menuStore.setMenuChild('editLine', 0);     // 设置子菜单状态-线编辑
  canvasStore.tips = "删除页面"; // 提示
  canvasStore.workState = 0; //清理-工作状态
  canvasStore.drawPelType = ""; //清理-绘制类型
  canvasStore.recordPoint = []; // 清理●记录点
  canvasStore.selectKeys = []; // 清理选择键
  canvasStore.selectToggle = !canvasStore.selectToggle; // 触发-选择切换
  projectStore.pageIndex = 0;
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历-删除
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝*/
  let CopyPages = JSON.parse(JSON.stringify(projectStore.pages));
  for (let Index = 0; Index < CopyPages.length; Index++) {
    let PenItem = CopyPages[Index];
    /** 判断-选中的画笔 */
    if (PenItem.key === Key) {
      CopyPages.splice(Index, 1);
    }
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  projectStore.pages = CopyPages;
 // console.log(CopyPages)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 切换布局
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  onActionRightNavigation("RightProject"); // 激活右框导航-工程
  setTimeout(() => {
    onActionDownNavigation("DownPage"); // 激活下框导航-页面
  }, 100);
};

/** 更改画布单位及页面尺寸 */
export const onPageSizeAndUnit = () => {
 // console.log("更改页面尺寸");
  /** 页面尺寸 */
  let pageSize = canvasStore.canvasAttr.pageSize;
  /** 页面尺寸选项 */
  const pageSizeOpt = staticStore.pageSizeOpt;
  /** 页面方向 */

  let pageOrientation = canvasStore.canvasAttr.pageOrientation;
  if (pageSize !== "自定义") {
   // console.log("更改页面单位");
    pageSizeOpt.forEach((items: any) => {
      if (items.value === pageSize) {
       // console.log(items.unit);
        canvasStore.canvasAttr.pageUnit = items.unit; // 页面单位
      }
    });

    /** ★ 页面方向为水平 */
    if (pageOrientation == "PageHorizontal") {
     // console.log("★ ★ 页面方向为水平");
      pageSizeOpt.forEach((items: any) => {
        if (items.value === pageSize) {
          canvasStore.canvasAttr.canvasWidth = items.size[0]; // 画布宽度
          canvasStore.canvasAttr.canvasHeight = items.size[1]; // 画布高度
        }
      });
    } else if (pageOrientation == "PageVertical") {
      /** ★ 页面方向为垂直 */
     // console.log("★ ★ 页面方向为垂直");
      pageSizeOpt.forEach((items: any) => {
        if (items.value === pageSize) {
          canvasStore.canvasAttr.canvasWidth = items.size[1];
          canvasStore.canvasAttr.canvasHeight = items.size[0];
        }
      });
    }
  }
};

/** 显示光标处理器 */
export const onShowCursorHandel = () => {
 // console.log("显示光标处理器")
  //🚩 不显示光标
  if (!canvasStore.canvasAttr.isShowCursor /*显示光标*/) {
   // console.log("不显示光标");
    d3.select("#PanelCanvas").style("cursor", "default"); //默认
  }
};

/** 设置格栅尺寸 */
export const onSetGridSize = () => {
 // console.log("★ 画布-设置格栅尺寸");
  /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
  let gridStyle = canvasStore.canvasAttr.gridStyle;
  let canvasWidth = canvasStore.canvasAttr.canvasWidth; //画布宽度
  let canvasHeight = canvasStore.canvasAttr.canvasHeight; //画布高度
  let gridSpace = canvasStore.canvasAttr.gridSpace; //等分格栅
  let gridBisectionWidthCont = canvasStore.canvasAttr.gridBisectionWidthCont; //宽等分数
  let gridBisectionHeightCont = canvasStore.canvasAttr.gridBisectionHeightCont; //高等分数

  if (gridStyle === 2 /*均分画布*/) {
    let NewGridWidth = canvasWidth / gridSpace;
    let NewGridHeight = canvasHeight / gridSpace;
    canvasStore.canvasAttr.gridWidth = NewGridWidth; //格栅宽度
    canvasStore.canvasAttr.gridHeight = NewGridHeight; //格栅高度
  }
  if (gridStyle === 3 /*画布长宽等分*/) {
    let NewGridWidth = canvasWidth / gridBisectionWidthCont;
    let NewGridHeight = canvasHeight / gridBisectionHeightCont;
    canvasStore.canvasAttr.gridWidth = NewGridWidth; //格栅宽度
    canvasStore.canvasAttr.gridHeight = NewGridHeight; //格栅高度
  }
};

/** 复制_画布参数 */
export const onCopyPageCanvasInfo = () => {
 // console.log("复制_画布参数");
  /** 页面尺寸 */
  canvasStore.copyPageInfo.pageSize = String(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.pageSize))
  );
  /** 页面方向 */
  canvasStore.copyPageInfo.pageOrientation = String(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.pageOrientation))
  );
  /** 页面精度 */
  canvasStore.copyPageInfo.pageAccuracy = String(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.pageAccuracy))
  );
  /** 页面单位 */
  canvasStore.copyPageInfo.pageUnit = String(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.pageUnit))
  );
  /** 画布缩放 */
  canvasStore.copyPageInfo.canvasScale = Number(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.canvasScale))
  );
  /** 画布背景色 */
  canvasStore.copyPageInfo.canvasBackColor = String(
    JSON.parse(JSON.stringify(canvasStore.canvasAttr.canvasBackColor))
  );
  // 🦢 格栅
  /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
  canvasStore.copyCanvasInfo.gridModel = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridModel)
  );
  /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
  canvasStore.copyCanvasInfo.gridStyle = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridStyle)
  );
  /** 格栅间距 */
  canvasStore.copyCanvasInfo.gridSpace = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridSpace)
  );
  /** 宽等分数 */
  canvasStore.copyCanvasInfo.gridBisectionWidthCont = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridBisectionWidthCont)
  );
  /** 宽等分数 */
  canvasStore.copyCanvasInfo.gridBisectionHeightCont = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridBisectionHeightCont)
  );
  /** 格栅点颜色 */
  canvasStore.copyCanvasInfo.gridDotColor = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridDotColor)
  );
  /** 小格颜色 */
  canvasStore.copyCanvasInfo.gridColorMini = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridColorMini)
  );
  /** 大格颜色 */
  canvasStore.copyCanvasInfo.gridColorMax = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridColorMax)
  );
  /** 格栅宽度 */
  canvasStore.copyCanvasInfo.gridWidth = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridWidth)
  );
  /** 格栅高度 */
  canvasStore.copyCanvasInfo.gridHeight = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.gridHeight)
  );

  // 🦢 光标
  /** 显示光标 */
  canvasStore.copyCanvasInfo.isShowCursor = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.isShowCursor)
  );
  /** 光标颜色 */
  canvasStore.copyCanvasInfo.cursorColor = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.cursorColor)
  );

  /** 光标盒子尺寸 */
  canvasStore.copyCanvasInfo.cursorBoxSize = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.cursorBoxSize)
  );
  /** 光标长度 */
  canvasStore.copyCanvasInfo.cursorLang = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.cursorLang)
  );
  /** 光标线宽度 */
  canvasStore.copyCanvasInfo.cursorLineWidth = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.cursorLineWidth)
  );

  // 🦢 捕捉
  /** 捕捉状态 */
  canvasStore.copyCanvasInfo.isCatch = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.isCatch)
  );
  /** 捕捉距离 */
  canvasStore.copyCanvasInfo.catchRange = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchRange)
  );
  
  /** 捕捉到 上左 */
  canvasStore.copyCanvasInfo.catchUpLeft = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchUpLeft)
  );
  /** 捕捉到 上 */
  canvasStore.copyCanvasInfo.catchUp = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchUp)
  );
  /** 捕捉到 上右 */
  canvasStore.copyCanvasInfo.catchUpRight = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchUpRight)
  );
  /** 捕捉到 左 */
  canvasStore.copyCanvasInfo.catchLeft = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchLeft)
  );
  /** 捕捉到 中 */
  canvasStore.copyCanvasInfo.catchMidle = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchMidle)
  );
  /** 捕捉到 右 */
  canvasStore.copyCanvasInfo.catchRight = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchRight)
  );
  /** 捕捉到 下右 */
  canvasStore.copyCanvasInfo.catchDownRight = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchDownRight)
  );
  /** 捕捉到 下 */
  canvasStore.copyCanvasInfo.catchDown = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchDown)
  );
  /** 捕捉到 下左 */
  canvasStore.copyCanvasInfo.catchDownLeft = JSON.parse(
    JSON.stringify(canvasStore.canvasAttr.catchDownLeft)
  );
};

/** 粘贴_画布参数 */
export const onPastePageCanvasInfo = () => {
 // console.log("粘贴_画布参数");
  /** 页面尺寸 */
  canvasStore.canvasAttr.pageSize = String(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.pageSize))
  );
  /** 页面方向 */
  canvasStore.canvasAttr.pageOrientation = String(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.pageOrientation))
  );
  /** 页面精度 */
  canvasStore.canvasAttr.pageAccuracy = String(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.pageAccuracy))
  );
  /** 页面单位 */
  canvasStore.canvasAttr.pageUnit = String(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.pageUnit))
  );
  /** 画布缩放 */
  canvasStore.canvasAttr.canvasScale = Number(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.canvasScale))
  );
  /** 画布背景色 */
  canvasStore.canvasAttr.canvasBackColor = String(
    JSON.parse(JSON.stringify(canvasStore.copyPageInfo.canvasBackColor))
  );
  // 🦢 格栅
  /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
  canvasStore.canvasAttr.gridModel = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridModel))
  );
  /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
  canvasStore.canvasAttr.gridStyle = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridStyle))
  );
  /** 格栅间距 */
  canvasStore.canvasAttr.gridSpace = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridSpace))
  );
  /** 宽等分数 */
  canvasStore.canvasAttr.gridBisectionWidthCont = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridBisectionWidthCont))
  );
  /** 宽等分数 */
  canvasStore.canvasAttr.gridBisectionHeightCont = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridBisectionHeightCont))
  );
  /** 格栅点颜色 */
  canvasStore.canvasAttr.gridDotColor = String(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridDotColor))
  );
  /** 小格颜色 */
  canvasStore.canvasAttr.gridColorMini = String(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridColorMini))
  );
  /** 大格颜色 */
  canvasStore.canvasAttr.gridColorMax = String(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridColorMax))
  );
  /** 格栅宽度 */
  canvasStore.canvasAttr.gridWidth = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridWidth))
  );
  /** 格栅高度 */
  canvasStore.canvasAttr.gridHeight = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.gridHeight))
  );

  // 🦢 光标
  /** 显示光标 */
  canvasStore.canvasAttr.isShowCursor = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.isShowCursor))
  );
  /** 光标颜色 */
  canvasStore.canvasAttr.cursorColor = String(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.cursorColor))
  );
  /** 光标盒子尺寸 */
  canvasStore.canvasAttr.cursorBoxSize = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.cursorBoxSize))
  );
  /** 光标长度 */
  canvasStore.canvasAttr.cursorLang = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.cursorLang))
  );
  /** 光标线宽度 */
  canvasStore.canvasAttr.cursorLineWidth = Number(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.cursorLineWidth))
  );
  
  // 🦢 捕捉
  /** 捕捉状态 */
  canvasStore.canvasAttr.isCatch = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.isCatch))
  );
  /** 捕捉距离 */
  canvasStore.canvasAttr.catchRange = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchRange))
  );
  /** 捕捉到 上左 */
  canvasStore.canvasAttr.catchUpLeft = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchUpLeft))
  );
  /** 捕捉到 上 */
  canvasStore.canvasAttr.catchUp = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchUp))
  );
  /** 捕捉到 上右 */
  canvasStore.canvasAttr.catchUpRight = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchUpRight))
  );
  /** 捕捉到 左 */
  canvasStore.canvasAttr.catchLeft = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchLeft))
  );
  /** 捕捉到 中 */
  canvasStore.canvasAttr.catchMidle = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchMidle))
  );
  /** 捕捉到 右 */
  canvasStore.canvasAttr.catchRight = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchRight))
  );
  /** 捕捉到 下右 */
  canvasStore.canvasAttr.catchDownRight = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchDownRight))
  );
  /** 捕捉到 下 */
  canvasStore.canvasAttr.catchDown = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchDown))
  );
  /** 捕捉到 下左 */
  canvasStore.canvasAttr.catchDownLeft = Boolean(
    JSON.parse(JSON.stringify(canvasStore.copyCanvasInfo.catchDownLeft))
  );
};

/** 导出页面和图元 */
export const onPagePelsLeadOutJSON = () => {
 // console.log("导出页面和图元")

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储 建立 变量
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // ◆ 建立-保存时间
  var time = new Date()
  let Calendar = time.getFullYear() + '年' + time.getMonth() + '月' + time.getDate() + '日' + time.getHours() + '时' + time.getMinutes() + '分' + time.getSeconds() + '秒' + time.getMilliseconds() + '毫秒'
  /** 导出 */
  let LeadOut = {
    calendar: Calendar,
    type: 'pageAandCanvas',
    page: canvasStore.canvasAttr,
    pels: workStore.pels,
  }
  // 将JSON数据转换为Blob对象
  const blob = new Blob([JSON.stringify(LeadOut)], { type: 'application/json;charset=utf-8' });
  // 使用FileSaver.js保存Blob对象为JSON文件
  saveAs(blob, '传鸿组态_画布和图元.json');
  canvasStore.tips = "导出_传鸿组态_页面和图元_成功";
}
